import React, {Component} from 'react'
import Carousel from 'uxcore-carousel'
import './emojiList.less'

export default class EmojiList extends Component {
  constructor (props) {
    super(props)
    this.state = ({
      emoji1: [
        '\u{1F602}', '\u{1F603}', '\u{1F631}', '\u{1F613}', '\u{1F62D}', '\u{1F60F}', '\u{1F614}',
        '\u{1F60D}', '\u{1F624}', '\u{1F61C}', '\u{1F61D}', '\u{1F60B}', '\u{1F618}', '\u{1F61A}',
        '\u{1F637}', '\u{1F633}', '\u{1F616}', '\u{1F605}', '\u{1F606}', '\u{1F601}', '\u{1F60C}',
        '\u{1F60A}', '\u{1F604}', '\u{1F622}', '\u{1F62A}', '\u{1F628}', '\u{1F623}', '\u{1F621}'
      ],
      emoji2: [
        '\u{1F620}', '\u{1F629}', '\u{1F632}', '\u{1F61E}', '\u{1F635}', '\u{1F630}', '\u{1F612}',
        '\u{1F625}', '\u{1F62B}', '\u{1F609}', '\u{1F63A}', '\u{1F638}', '\u{1F639}', '\u{1F63D}',
        '\u{1F63B}', '\u{1F63F}', '\u{1F63C}', '\u{1F640}', '\u{1F648}', '\u{1F64A}', '\u{1F649}',
        '\u{270A}', '\u{270B}', '\u{270C}', '\u{1F44A}', '\u{1F44D}', '\u{261D}', '\u{1F446}'
      ],
      emoji3: [
        '\u{1F447}', '\u{1F448}', '\u{1F449}', '\u{1F44B}', '\u{1F44F}', '\u{1F44C}', '\u{1F44E}',
        '\u{1F450}', '\u{1F338}', '\u{1F339}', '\u{1F342}', '\u{1F343}', '\u{1F33A}', '\u{1F33B}',
        '\u{1F334}', '\u{1F335}', '\u{1F33E}', '\u{1F33D}', '\u{1F352}', '\u{1F34C}', '\u{1F34E}',
        '\u{1F34A}', '\u{1F353}', '\u{1F349}', '\u{1F345}'
      ]
    })
  }

  onClickItem (item) {
    this.props.onClickItem && this.props.onClickItem(item)
  }

  renderEmojiPage (page) {
    return (
      <div className='emoji-box'>
        {
          page.map((item, index) => {
            return <div key={index} onClick={this.onClickItem.bind(this, item)}>{item}</div>
          })
        }
      </div>
    )
  }

  render () {
    return (
      <div className='img-swiper'>
        <Carousel arrows={false}>
          {this.renderEmojiPage(this.state.emoji1)}
          {this.renderEmojiPage(this.state.emoji2)}
          {this.renderEmojiPage(this.state.emoji3)}
        </Carousel>
      </div>
    )
  }
}
